import React, { useState, useMemo } from 'react'

function PageA (props) {
  console.log('a')
  return (
    <>
    <button onClick = { props.onClick }>按钮A - { props.children }</button>
    </>
  ) 
}

function PageB (props) {
  console.log('b')
  return (
    <>
    <button onClick = { props.onClick }>按钮B - { props.name }</button>
    </>
  ) 
}
function App() {
  const [a, setA] = useState(1)
  const setAFn = () => {
    setA(a + 1)
  }

  const [b, setB] = useState(2)
  const setBFn = () => { 
    setB(b + 2)
  }
  // useMemo 记忆组件
  const child1 = useMemo(() => <PageA onClick = { setAFn }>{a}</PageA>, [a])
  const child2 = useMemo(() => <PageB onClick = { setBFn } name={ b }></PageB>, [b])
  return (
    <div>
      { child1 }
      <hr />
      { child2 }
    </div>
  )
}

export default App
